<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听器的应用实例</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#app{
				width:400px;
				height:150px;
				margin:50px auto;
				padding:20px;
				border:2px solid black;
				box-shadow:10px 20px 20px 10px gray;
			}
			h3{
				height:50px;
				line-height:50px;
				text-align:center;
				background-color:black;
				color:white;
				margin-bottom:20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>案例:验证用户名是否可用</h3>
		    <p>
				<span>用户名:</span>
				<input type="text" v-model.lazy="userName">
				<span>{{tip}}</span>
			</p>
		</div>
		<!-- 
	       监听器：
		   1，采用监听器监听用户名的变化
		   2，调用后台接口进行验证
		   3，根据验证的结果调整提示信息
		 -->
		<script>
			let vm = new Vue({
				el:"#app",
				data:{
				  userName:"",
				  tip:""
				},
				watch:{
					"userName":function(newValue){
						//调用后台接口验证用户名的合法性
						this.checkName(newValue);
						//修改提示信息
						this.tip="正在验证...";
					}
				},
				methods:{
					checkName:function(username){
						//调用接口，但是可以使用定时任务的方式模拟接口调用	
						//setInterval中默认this指向为windows,所以做this指向的缓存使用
						var that = this;
						setTimeout(function(){
							//模拟接口调用
							if(username == "admin"){
								that.tip="用户名已经存在，请换一个";
							}else{
								that.tip="用户名可以使用";
							}
						},2000)
					}
				}
			})
		</script>
	</body>
</html>
